import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  Image,
  StyleSheet,
  TouchableOpacity,
  DeviceEventEmitter,
} from 'react-native';
import _ from 'lodash';
import PxToDp from '../../../utils/PxToDp';

import { sendIntentionFeedback } from '../../../actions/MyCustomerDetailAction';

const optionText = [
  {
    id: 0,
    text: '很满意，大部分正确',
  },
  {
    id: 1,
    text: '一般，准确率50%',
  },
  {
    id: 2,
    text: '不满意，准确率太低',
  },
];

class Option extends Component {

  render() {
    const iconColor = this.props.selected ? '#f65252' : 'transparent';
    const borderWidth = this.props.selected ? 0 : PxToDp(1);
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        style={[styles.option, { marginTop: this.props.top }]}
        onPress={() => this.props.onPress()}
      >
        { this.props.selected ?
          <Image style={[styles.selected]} source={require('../../../img/home/hRight.png')} />
          : <View style={[styles.selectedIcon, { backgroundColor: iconColor, borderWidth }]} />
        }
        <Text style={styles.optionText}>{this.props.text}</Text>
      </TouchableOpacity>
    );
  }
}

class PurchaseIntentionFeedback extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: [false, false, false],
      feedback: '',
    };
  }

  _optionSelect(index) {
    const arr = [];
    for (let i = 0; i < 3; i += 1) {
      arr.push(false);
    }
    arr[index] = true;

    this.setState({ selected: arr });
  }

  _submitFeedback() {
    const { user, score, dispatch } = this.props;
    const index = _.indexOf(this.state.selected, true) + 1 ?
      _.indexOf(this.state.selected, true) : 0;
    const data = {
      score: `${score}`,
      uid: `${user.id}`,
      option_item: optionText[index].text,
      feedback: this.state.feedback,
    };

    dispatch(sendIntentionFeedback(data, user.id, () => {
      DeviceEventEmitter.emit('showToast', '反馈提交成功！');
    }));
  }

  render() {
    const { score } = this.props;
    return (
      <View style={[styles.bgColor, styles.flex]}>
        <View style={styles.wrapper}>
          <View style={styles.titleWrapper}>
            <Text style={styles.title}>购买意向反馈</Text>
          </View>
          <View>
            <Text style={styles.question}>当前“购买意向为”{score}%，您认为是否准确？</Text>
          </View>
          <View style={[styles.optionGroup]}>
            {
              optionText.map((option, index) => (
                <Option
                  key={option.id}
                  text={option.text}
                  top={index === 0 ? 0 : PxToDp(18)}
                  selected={this.state.selected[index]}
                  onPress={() => this._optionSelect(index)}
                />
              ))
            }
          </View>
          <View style={styles.bottomWrapper}>
            <TextInput
              multiline
              placeholder="请输入您的宝贵意见"
              style={styles.feedbackContent}
              onChangeText={text => this.setState({ feedback: text })}
              underlineColorAndroid="transparent"
            />
            <View style={styles.submitWrapper}>
              <TouchableOpacity
                activeOpacity={0.6}
                style={[styles.button, styles.cancel]}
                onPress={() => this.props.onPress()}
              >
                <Text style={styles.cancelText}>取消</Text>
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.6}
                style={[styles.button, styles.submit]}
                onPress={() => {
                  this._submitFeedback();
                  this.props.onPress();
                }
                }
              >
                <Text style={styles.submitText}>提交反馈</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  flex: {
    flex: 1,
  },
  wrapper: {
    justifyContent: 'space-between',
    alignItems: 'center',
    width: PxToDp(320),
    height: PxToDp(410),
    paddingTop: PxToDp(20),
    backgroundColor: '#fff',
    borderStyle: 'solid',
    borderColor: '#f65252',
    borderTopWidth: PxToDp(3),
    borderRadius: PxToDp(2),
  },
  titleWrapper: {
    alignItems: 'center',
    width: PxToDp(280),
    marginBottom: 0,
  },
  title: {
    color: '#333',
    fontSize: PxToDp(20),
  },
  bottomWrapper: {
    width: '100%',
  },
  submitWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 0,
    width: '100%',
    height: PxToDp(50),
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(160),
    height: PxToDp(50),
    borderStyle: 'solid',
    borderColor: '#ddd',
    borderTopWidth: PxToDp(1),
  },
  cancel: {
    marginLeft: 0,
    borderRightWidth: PxToDp(1),
  },
  cancelText: {
    color: '#999',
    fontSize: PxToDp(18),
  },
  submit: {
    marginRight: 0,
  },
  submitText: {
    color: '#f65252',
    fontSize: PxToDp(18),
    fontWeight: 'bold',
  },
  feedbackContent: {
    justifyContent: 'flex-start',
    width: PxToDp(280),
    height: PxToDp(100),
    marginBottom: PxToDp(20),
    marginLeft: PxToDp(20),
    paddingLeft: PxToDp(12),
    paddingTop: PxToDp(4),
    color: '#999',
    backgroundColor: '#f5f5fb',
    fontSize: PxToDp(12),
    borderRadius: PxToDp(2),
  },
  optionGroup: {
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    width: PxToDp(280),
    marginTop: 0,
  },
  option: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    width: '100%',
  },
  selectedIcon: {
    width: PxToDp(18),
    height: PxToDp(18),
    marginRight: PxToDp(14),
    borderStyle: 'solid',
    borderColor: '#ddd',
    borderRadius: PxToDp(9),
  },
  optionText: {
    color: '#333',
    fontSize: PxToDp(16),
  },
  question: {
    color: '#999',
    fontSize: PxToDp(16),
  },
  selected: {
    width: PxToDp(18),
    height: PxToDp(18),
    marginRight: PxToDp(14),
    borderRadius: PxToDp(9),
  },
});

export default PurchaseIntentionFeedback;
